<template>
  <ScalablePage>
    <div class="resolution">
      <div>
        <FirstLevelTitle text="运行监测"></FirstLevelTitle>
        <div>
          <div style="display: flex; justify-content: space-between; margin-bottom: 10px;">
            <!-- 水质数据 -->
            <div class="quality">
              <secondary-title text="水质数据" more="更多>>>"></secondary-title>
              <div style="width: 272px; display: flex; justify-content: space-between;">
                <div>
                  <div class="water-quality-title" style="color: #fff;">进水浊度</div>
                  <div :class="['water-quality-data-1', 'water-quality-data']">
                    <span
                      :style="{ color: Number(water.yuanShui) >= 3 && Number(water.yuanShui) <= 30 ? '#fff' : '#ff0000' }">{{
                        water.yuanShui }}</span>
                  </div>
                </div>
                <div>
                  <div class="water-quality-title" style="color: #fff;">制水浊度</div>
                  <div :class="['water-quality-data-2', 'water-quality-data']">
                    <div class="span-1">
                    <div :style="{ color: Number(turbidityA) > 2 ? '#ff0000' : '#fff' }">A池: {{ turbidityA
                      }}</div>
                    <div  :style="{ color: Number(turbidityB) > 2 ? '#ff0000' : '#fff' }">B池: {{ turbidityB
                      }}</div>
                    <div  :style="{ color: Number(turbidityC) > 2 ? '#ff0000' : '#fff' }">C池: {{ turbidityC
                      }}</div>

                    </div>
                  </div>
                </div>
                <div>
                  <div class="water-quality-title" style="color: #fff;">出水浊度</div>
                  <div :class="['water-quality-data-1', 'water-quality-data']">
                    <span :style="{ color: Number(water.gongShui) > 0.2 ? '#ff0000' : '#fff' }">{{ water.gongShui
                    }}</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 工艺 -->
            <div>
              <secondary-title text="工艺泵组数据" more="更多>>>"></secondary-title>
              <div class="pump-group" style="margin-top: 5px;">
                <div class="pump-left">
                  <div class="pump-icon">
                    <img src="@/assets/images/left/zuo7.png" alt="" />
                  </div>
                  <div class="pump-content">
                    <div class="pump-cont">进水流量</div>
                    <div class="pump-tent">
                      {{ tatal }}
                      <div class="pump-m">&nbsp;m<span class="pump-num">3</span></div>
                    </div>
                  </div>
                </div>
                <div class="pump-left" style="margin-top: 5px">
                  <div class="pump-icon">
                    <img src="@/assets/images/left/zuo7.png" alt="" />
                  </div>
                  <div class="pump-content">
                    <div class="pump-cont">出水流量</div>
                    <div class="pump-tent">
                      {{ chushui }}
                      <div class="pump-m">&nbsp;m<span class="pump-num">3</span></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 设备管理 -->
        <FirstLevelTitle text="设备管理" more="更多>>>"></FirstLevelTitle>
        <div class="device-title">
          <div class="title-icon">
            <img src="../../../assets/changcheng/Frame-v2.png" alt="" />
          </div>
          <div class="icon-cont">设备总台数: <span style="color: #ffc938; font-size: 16px;">&nbsp;&nbsp;{{ shebei.total
          }}</span> 台</div>
        </div>
        <div class="device-list">
          <div class="device-item" v-for="item in shebei.shebeiguanli" :key="item.item_value" style="padding:0">
            <div class="ite-con">
              <span class="device-name">{{ item.item_text }}</span>
              <span class="device-count">{{ item.total_num }}台</span>
            </div>
          </div>

        </div>

        <!-- 设备维修 -->
        <div style="margin: 5px 0;">
          <secondary-title text="设备维修数量" more="更多>>>"></secondary-title>
        </div>
        <div class="scroll-title" style="font-size: 11px;">
          <div style="flex:1">设备名称</div>
          <div style="width:200px">报修时间</div>
          <div style="width:100px">维修状态</div>
        </div>
        <div class="scroll-table" style="height:64px">
          <table class="device-report-table">
            <tbody>
              <tr v-for="itm in weixiu" :key="itm.item_value">
                <td style="width:140px;">{{ itm.equipmentName }}</td>
                <td style="width:220px; color: #1e78cc;">{{ itm.repairDate }}</td>
                <td style="width:80px" class="maintenance-state">{{ itm.finishFlag_dictText }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </ScalablePage>
</template>

<script setup lang="ts">
import { onMounted, ref, toRefs, reactive } from "vue";
import { waterApi, prodApi } from "@/utils/shuiwu/api"
import ScalablePage from '@/components/ScalablePage.vue'; // 引入组件


const tatal = ref(0)
const chushui = ref(0)
const state = reactive({
  shebei: {
    shebeiguanli: [],
    total: 0
  },
  water: {
    yuanShui: 0,
    jingShui: 0,
    gongShui: 0
  },
  weixiu: []

})

let { shebei, water, weixiu } = toRefs(state)
const turbidityA = ref('0')
const turbidityB = ref('0')
const turbidityC = ref('0')



let intervalId = null

onMounted(() => {
  getJingShui(631)
  getJingShui(642)  //出水
  getBengZu(634)
  getChuShui(642)
  getJingShui(643)
  shebeiGuanli()
  shebeiWeixiu()
  SedimentationTank(643)
  intervalId = setInterval(() => {
    getJingShui(631)
    getJingShui(642)
    getChuShui(642)
    getBengZu(634)
    getJingShui(643)
    shebeiGuanli()
    shebeiWeixiu()
    SedimentationTank(643)
  }, 10000)
});

function getChuShui(id: number) {
  waterApi(id).then(res => {
    let arr = res.rows as any;
    let total = 0
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].modelId == 4631 || arr[i].modelId == 4633 || arr[i].modelId == 4634 || arr[i].modelId == 4636 || arr[i].modelId == 4637 || arr[i].modelId == 4638 || arr[i].modelId == 4639 || arr[i].modelId == 4640) {
        total += Number(arr[i].value)
      }
    }
    chushui.value = total

  })
}

function getBengZu(id: number) {
  waterApi(id).then(res => {
    let arr = res.rows as any;
    let total = 0
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].modelId == 4387 || arr[i].modelId == 4388) {
        total += Number(arr[i].value)
      }
    }
    tatal.value = total

  })
}

function getJingShui(id: number) {
  waterApi(id).then(res => {
    let arr = res.rows as any;
    let total = 0
    for (let i = 0; i < arr.length; i++) {
      if (arr[i].modelId == 4377) {
        state.water.yuanShui = arr[i].value;
        return
      }
      if (arr[i].modelId == 4641) {
        state.water.gongShui = arr[i].value;
        return
      }
      if (arr[i].modelId == 4829) {
        state.water.jingShui = arr[i].value;
        return
      }
      if (arr[i].modelId == 4389 || arr[i].modelId == 4390) {
        total += arr[i].value
      }
    }
  })
}

function shebeiGuanli() {
  fetch('http://111.113.0.230:8066/orca/equipment/getGroupTotalNum').then(r => {
    if (r.status === 200) {
      return r.json()
    } else {
      return Promise.reject(r.json())
    }
  }).then(res => {
    let num = 0
    res.result.forEach((i: { total_num: number; }) => {
      num += i.total_num
    })
    state.shebei.total = num

    const numberDevices = JSON.parse(JSON.stringify(res.result))

    // 定义优先排序项
    const priority = ["配水井", "沉淀池", "翻板滤池", "送水泵房"];

    // 自定义排序
    const sortedData = numberDevices.sort((a, b) => {
      const indexA = priority.indexOf(a.item_text);
      const indexB = priority.indexOf(b.item_text);

      // 如果在priority中，按优先级排前面
      if (indexA !== -1 && indexB !== -1) {
        return indexA - indexB;
      }
      if (indexA !== -1) return -1;
      if (indexB !== -1) return 1;

      return 0;
    });
    state.shebei.shebeiguanli = sortedData
  })
}


function shebeiWeixiu() {
  fetch('http://111.113.0.230:8066/orca/equipment/equipmentRepair/list').then(r => {
    if (r.status === 200) {
      return r.json()
    } else {
      return Promise.reject(r.json())
    }
  }).then(res => {

    state.weixiu = res.result.records

  })
}


/** 浊度 **/
async function SedimentationTank(id: number) {
  prodApi(id).then((res) => {
    let arr = res.rows as any;
    arr.forEach(element => {
      if (element.modelId == 4829) {
        turbidityA.value = element.value
      }
      if (element.modelId == 4906) {
        turbidityB.value = element.value
      }
      if (element.modelId == 4907) {
        turbidityC.value = element.value
      }
    });
  });
}
</script>
<style scoped lang="less">
@import url(./index.less);

.maintenance-state {
  color: #e9e9e9;
}
</style>